@extends('seller::layout.master')

@section('title', __('seller::transaction.title'))

@section('content')
  @if ($errors->has('error'))
    <x-seller-alert type="danger" msg="{{ $errors->first('error') }}" class="mt-4" />
  @endif

  <div id="customer-app" class="card h-min-600">
    <div class="card-body">
      <div class="bg-light p-4 mb-3" id="app">
      {{ __('seller::transaction.balance') }} {{ currency_format($balance) }}
      </div>
      @if (count($transactions))
        <div class="table-push">
          <table class="table">
            <thead>
            <tr>
              <th>{{ __('seller::transaction.id') }}</th>
              <th>{{ __('seller::transaction.description') }}</th>
              <th>{{ __('seller::transaction.amount') }}</th>
              <th>{{ __('seller::transaction.created_at') }}</th>
            </tr>
            </thead>
            <tbody>
            @if (count($transactions))
              @foreach ($transactions as $transaction)
                <tr data-hook-id={{ $transaction->id }}>
                  <td>{{ $transaction->id }}</td>
                  <td>{{ $transaction->description }}</td>
                  <td>{{ currency_format($transaction->amount) }}</td>
                  <td>{{ $transaction->created_at }}</td>
                </tr>
              @endforeach
            @else
              <tr>
                <td colspan="9" class="border-0">
                  <x-seller-no-data />
                </td>
              </tr>
            @endif
            </tbody>
          </table>
        </div>
        {{ $transactions->withQueryString()->links('admin::vendor/pagination/bootstrap-4') }}
      @else
        <x-seller-no-data />
      @endif
    </div>
  </div>

@endsection

@push('footer')
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        url: @json(seller_route('transactions.index')),
        filter: {
          start: bk.getQueryString('start'),
          end: bk.getQueryString('end'),
        },
      },

      created() {
        bk.addFilterCondition(this);
      },

      methods: {
        search() {
          location = bk.objectToUrlParams(this.filter, this.url)
        },

        resetSearch() {
          this.filter = bk.clearObjectValue(this.filter)
          location = bk.objectToUrlParams(this.filter, this.url)
        },
      }
    });
  </script>
@endpush
